<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BIM计算</title>
    <link rel="stylesheet" href="BMI计算器.css">  
</head>
<body>
  <main>
      <form action="">
          <table id="table1">
              <caption style="text-align: left;margin-bottom: 5px;"><h3>免费计算你的身体质量指数 (BMI)</h3></caption>
              <tr>
                  <td id="hidden" colspan="3"> 你的BMI值:<span style="color: red;" id="BMI_value"></span>,身体状态:<span id="status_value"></span></td>
              </tr>
              <tr>
                  <td>度量单位:</td>
                  <td>
                      <input type="radio" name="danwei" id="stype1" checked="checked"><label for="stype1">公制</label>
                      <input type="radio" name="danwei" id="stype2"><label for="stype2">英制</label>
                  </td>
                  <td></td> 
              </tr>
              <tr>
                  <td>我的身高:</td>
                  <td>
                      <input type="text" class="same">
                  </td>
                  <td>单位: 厘米 cm</td>
              </tr>
              <tr>
                  <td>我的体重:</td>
                  <td>
                      <input type="text" class="same">
                  </td>
                  <td>单位: 千克 kg</td>
              </tr>
              <tr>
                  <td>BMI 标准:</td>
                  <td>
                      <select name="" id="sel_hig">
                          <option value="">国际标准</option>
                          <option value="" selected>中国标准</option>
                          <option value="">日本标准</option>
                          <option value="">新加坡标准</option>
                      </select>
                  </td>
                  <td></td>
              </tr>
              <tr>
                  <td></td>
                  <td>
                      <input type="checkbox" checked="checked"><label for="">自动保存 BMI 历史记录</label>
                  </td>
                  <td></td>
              </tr>
              <tr>
                  <td></td>
                  <td>
                      <input type="button" value="计算BMI" id="b_value">
                  </td>
                  <td></td>
              </tr>
          </table>
      </form>
      <table id="table2">
          <caption style="text-align: left;"><h5>BMI 中国标准</h5></caption>
          <tr>
              <td></td>
              <td>分类</td>
              <td>BMI 范围</td>
          </tr>
          <tr style="position: relative;">
              <td><img id="one" class="same_position" src="捕获.PNG" alt=""></td>
              <td>偏瘦</td>
              <td>&lt;=18.4</td>
          </tr>
          <tr style="position: relative;">
              <td><img id="two" class="same_position two" src="捕获.PNG" alt=""></td>  
              <td>正常</td>
              <td>18.5 ~ 23.9</td>
          </tr>
          <tr style="position: relative;">
              <td><img id="third" class="same_position third" src="捕获.PNG" alt=""></td>
              <td>过重</td>
              <td>24.0 ~ 27.9</td>
          </tr>
          <tr style="position: relative;">
              <td><img id="four" class="same_position four" src="捕获.PNG" alt=""></td>
              <td>肥胖</td>
              <td>&gt;=28.0</td>
          </tr>
      </table>
  </main>
     
</body>
<script>
    var text1_input=document.getElementsByClassName('same')[0];
    var text2_input=document.getElementsByClassName('same')[1];
    var button_value=document.getElementById('b_value');
    var BMI_span=document.getElementById('BMI_value');
    var status_span=document.getElementById('status_value');
    var hidden_td=document.getElementById('hidden');
   

 button_value.onclick=function(){
    var height=text1_input.value/100;
    var weight=text2_input.value/1;
    var BMI=weight/(height*height);
     BMI=BMI.toFixed(1);
        if(height==0||isNaN(height)||weight==0||isNaN(weight)){
       alert("请输入正确的值");
       return;
    }
     var status="";
     if(BMI<=18.4){
           status="偏瘦";
           one.style.display='inline';
           two.style.display='none';
           third.style.display='none';
           four.style.display='none';

     }
    else if(BMI<=23.9){
          status="正常";
          two.style.display='inline';
          one.style.display='none';
           third.style.display='none';
           four.style.display='none';

     }
     else if(BMI<=27.9){
       status="过重";
       third.style.display='inline';
       two.style.display='none';
          one.style.display='none';
           four.style.display='none';
       
     }
     else{
       status="肥胖";
       four.style.display='inline';
       two.style.display='none';
          one.style.display='none';
           third.style.display='none';
     }
       BMI_span.innerText=BMI;
       status_span.innerText=status;
       hidden.style.display='table-cell';

     }
     

</script>
</html>